Quem trabalha com o desenvolvimento de sites web há muito tempo com certeza se surpreende com 2 coisas : Como a CSS ganhou poder dentro dos objetos da página e como os web-browsers ficaram pesados e as vezes temperamentais ( param de funcionar sem mais nem menos ). Como dizemos, não existe refeição de graça.
É surpreendente o que a CSS pode fazer hoje no site mas também é impossível memorizar cada recurso presente nela. Por este motivo, abaixo eu exibo os principais recursos da CSS e sua utilização.
| Propriedade | Descrição |
| alignContent | Define ou retorna o alinhamento entre as linhas dentro de um contêiner flexível quando os itens não ocupam todo o espaço disponível |
| alignItems | Define ou retorna o alinhamento para itens dentro de um contêiner flexível |
| alignSelf | Define ou retorna o alinhamento para itens selecionados dentro de um contêiner flexível |
| Animation | Uma propriedade abreviada para todas as propriedades de animação abaixo, exceto a propriedade animationPlayState |
| animationDelay | Define ou retorna quando a animação vai começar |
| animationDirection | Define ou retorna se a animação deve ou não ser reproduzida ao contrário em ciclos alternados |
| animationDuration | Define ou retorna quantos segundos ou milissegundos uma animação leva para completar um ciclo |
| animationFillMode | Define ou retorna quais valores são aplicados pela animação fora do tempo em que ela está sendo executada |
| animationIterationCount | Define ou retorna o número de vezes que uma animação deve ser executada |
| animationName | Define ou retorna um nome para a animação @keyframes |
| animationTimingFunction | Define ou retorna a curva de velocidade da animação |
| animationPlayState | Define ou retorna se a animação está rodando ou pausada |
| background | Define ou retorna todas as propriedades do plano de fundo em uma declaração |
| backgroundAttachment | Define ou retorna se uma imagem de fundo é fixa ou rola com a página |
| backgroundColor | Define ou retorna a cor de fundo de um elemento |
| backgroundImage | Define ou retorna a imagem de fundo para um elemento |
| backgroundPosition | Define ou retorna a posição inicial de uma imagem de fundo |
| backgroundRepeat | Define ou retorna como repetir (lado a lado) uma imagem de fundo |
| backgroundClip | Define ou retorna a área de pintura do fundo |
| backgroundOrigin | Define ou retorna a área de posicionamento das imagens de fundo |
| backgroundSize | Define ou retorna o tamanho da imagem de fundo |
| backfaceVisibility | Define ou retorna se um elemento deve ou não ficar visível quando não estiver voltado para a tela |
| border | Define ou retorna borderWidth, borderStyle e borderColor em uma declaração |
| borderBottom | Define ou retorna todas as propriedades borderBottom em uma declaração |
| borderBottomColor | Define ou retorna a cor da borda inferior |
| borderBottomLeftRadius | Define ou retorna a forma da borda do canto inferior esquerdo |
| borderBottomRightRadius | Define ou retorna a forma da borda do canto inferior direito |
| borderBottomStyle | Define ou retorna o estilo da borda inferior |
| borderBottomWidth | Define ou retorna a largura da borda inferior |
| borderCollapse | Define ou retorna se a borda da tabela deve ser recolhida em uma única borda ou não |
| borderColor | Define ou retorna a cor da borda de um elemento (pode ter até quatro valores) |
| borderImage | Uma propriedade abreviada para definir ou retornar todas as propriedades borderImage |
| borderImageOutset | Define ou retorna a quantidade pela qual a área da imagem de borda se estende além da caixa de borda |
| borderImageRepeat | Define ou retorna se a borda da imagem deve ser repetida, arredondada ou esticada |
| borderImageSlice | Define ou retorna os deslocamentos internos da borda da imagem |
| borderImageSource | Define ou retorna a imagem a ser usada como borda |
| borderImageWidth | Define ou retorna as larguras da borda da imagem |
| borderLeft | Define ou retorna todas as propriedades borderLeft em uma declaração |
| borderLeftColor | Define ou retorna a cor da borda esquerda |
| borderLeftStyle | Define ou retorna o estilo da borda esquerda |
| borderLeftWidth | Define ou retorna a largura da borda esquerda |
| borderRadius | Uma propriedade abreviada para definir ou retornar todas as quatro propriedades borderRadius |
| borderRight | Define ou retorna todas as propriedades borderRight em uma declaração |
| borderRightColor | Define ou retorna a cor da borda direita |
| borderRightStyle | Define ou retorna o estilo da borda direita |
| borderRightWidth | Define ou retorna a largura da borda direita |
| borderSpacing | Define ou retorna o espaço entre as células em uma tabela |
| borderStyle | Define ou retorna o estilo da borda de um elemento (pode ter até quatro valores) |
| borderTop | Define ou retorna todas as propriedades borderTop em uma declaração |
| borderTopColor | Define ou retorna a cor da borda superior |
| borderTopLeftRadius | Define ou retorna a forma da borda do canto superior esquerdo |
| borderTopRightRadius | Define ou retorna a forma da borda do canto superior direito |
| borderTopStyle | Define ou retorna o estilo da borda superior |
| borderTopWidth | Define ou retorna a largura da borda superior |
| borderWidth | Define ou retorna a largura da borda de um elemento (pode ter até quatro valores) |
| bottom | Define ou retorna a posição inferior de um elemento posicionado |
| boxDecorationBreak | Define ou retorna o comportamento do plano de fundo e da borda de um elemento na quebra de página ou, para elementos in-line, na quebra de linha. |
| boxShadow | Anexa uma ou mais sombras projetadas à caixa |
| boxSizing | Permite definir certos elementos para caber em uma área de uma certa maneira |
| captionSide | Define ou retorna a posição da legenda da tabela |
| caretColor | Define ou retorna a cor do cursor/cursor de um el |
| clear | Define ou retorna a posição do elemento em relação aos objetos flutuantes |
| clip | Define ou retorna qual parte de um elemento posicionado é visível |
| color | Define ou retorna a cor do texto |
| columnCount | Define ou retorna o número de colunas em que um elemento deve ser dividido |
| columnFill | Define ou retorna como preencher as colunas |
| columnGap | Define ou retorna o espaço entre as colunas |
| columnRule | Uma propriedade abreviada para definir ou retornar todas as propriedades columnRule |
| columnRuleColor | Define ou retorna a cor da regra entre as colunas |
| columnRuleStyle | Define ou retorna o estilo da regra entre as colunas |
| columnRuleWidth | Define ou retorna a largura da regra entre as colunas |
| columns | Uma propriedade abreviada para definir ou retornar columnWidth e columnCount |
| columnSpan | Define ou retorna quantas colunas um elemento deve abranger |
| columnWidth | Define ou retorna a largura das colunas |
| contente | Usado com os pseudo-elementos :before e :after, para inserir o conteúdo gerado |
| counterIncrement | Incrementa um ou mais contadores |
| counterReset | Cria ou redefine um ou mais contadores |
| cursor | Define ou retorna o tipo de cursor a ser exibido para o ponteiro do mouse |
| Direction | Define ou retorna a direção do texto |
| Display | Define ou retorna o tipo de exibição de um elemento |
| emptyCells | Define ou retorna se mostra a borda e o fundo das células vazias ou não |
| filter | Define ou retorna filtros de imagem (efeitos visuais, como desfoque e saturação) |
| flex | Define ou retorna o comprimento do item, relativo ao restante |
| flexBasis | Define ou retorna o comprimento inicial de um item flexível |
| flexDirection | Define ou retorna a direção dos itens flexíveis |
| flexFlow | Uma propriedade abreviada para as propriedades flexDirection e flexWrap |
| flexGrow | Define ou retorna quanto o item crescerá em relação ao restante |
| flexShrink | Define ou retorna como o item encolherá em relação ao restante |
| flexWrap | Define ou retorna se os itens flexíveis devem ser encapsulados ou não |
| cssFloat | Define ou retorna o alinhamento horizontal de um elemento |
| font | Define ou retorna fontStyle, fontVariant, fontWeight, fontSize, lineHeight e fontFamily em uma declaração |
| fontFamily | Define ou retorna a família de fontes para o texto |
| fontSize | Define ou retorna o tamanho da fonte do texto |
| fontStyle | Define ou retorna se o estilo da fonte é normal, itálico ou oblíquo |
| fontVariant | Define ou retorna se a fonte deve ser exibida em letras maiúsculas minúsculas |
| fontWeight | Define ou retorna o negrito da fonte |
| fontSizeAdjust | Preserva a legibilidade do texto quando ocorre fallback de fonte |
| fontStretch | Seleciona uma face normal, condensada ou expandida de uma família de fontes |
| hangPunctuation | Especifica se um caractere de pontuação pode ser colocado fora da caixa de linha |
| height | Define ou retorna a altura de um elemento |
| hifens | Define como dividir palavras para melhorar o layout dos parágrafos |
| ícone | Fornece ao autor a capacidade de estilizar um elemento com um equivalente icônico |
| imageOrientation | Especifica uma rotação na direção direita ou no sentido horário que um agente de usuário aplica a uma imagem |
| isolamento | Define se um elemento deve criar um novo conteúdo de empilhamento |
| justifiqueConteúdo | Define ou retorna o alinhamento entre os itens dentro de um contêiner flexível quando os itens não ocupam todo o espaço disponível. |
| left | Define ou retorna a posição esquerda de um elemento posicionado |
| letterSpacing | Define ou retorna o espaço entre os caracteres em um texto |
| lineHeight | Define ou retorna a distância entre linhas em um texto |
| listStyle | Define ou retorna listStyleImage, listStylePosition e listStyleType em uma declaração |
| listStyleImage | Define ou retorna uma imagem como marcador de item de lista |
| listStylePosition | Define ou retorna a posição do marcador de item de lista |
| listStyleType | Define ou retorna o tipo de marcador de item de lista |
| margin | Define ou retorna as margens de um elemento (pode ter até quatro valores) |
| marginBottom | Define ou retorna a margem inferior de um elemento |
| marginLeft | Define ou retorna a margem esquerda de um elemento |
| marginRight | Define ou retorna a margem direita de um elemento |
| marginTop | Define ou retorna a margem superior de um elemento |
| maxHeight | Define ou retorna a altura máxima de um elemento |
| maxWidth | Define ou retorna a largura máxima de um elemento |
| minHeight | Define ou retorna a altura mínima de um elemento |
| minWidth | Define ou retorna a largura mínima de um elemento |
| navDown | Define ou retorna para onde navegar ao usar a tecla de navegação de seta para baixo |
| navIndex | Define ou retorna a ordem de tabulação para um elemento |
| navLeft | Define ou retorna para onde navegar ao usar a tecla de navegação de seta para a esquerda |
| navRight | Define ou retorna para onde navegar ao usar a tecla de navegação de seta para a direita |
| navUp | Define ou retorna para onde navegar ao usar a tecla de navegação de seta para cima |
| objectFit | Especifica como o conteúdo de um elemento substituído deve ser ajustado à caixa estabelecida por sua altura e largura usadas |
| objectPosition | Especifica o alinhamento do elemento substituído dentro de sua caixa |
| opacity | Define ou retorna o nível de opacidade de um elemento |
| order | Define ou retorna a ordem do item flexível, em relação ao restante |
| orphans | Define ou retorna o número mínimo de linhas para um elemento que deve ser deixado no final de uma página quando ocorre uma quebra de página dentro de um elemento |
| outline | Define ou retorna todas as propriedades de contorno em uma declaração |
| outlineColor | Define ou retorna a cor do contorno ao redor de um elemento |
| outlineOffset | Desloca um contorno e o desenha além da borda da borda |
| outlineStyle | Define ou retorna o estilo do contorno ao redor de um elemento |
| outlineWidth | Define ou retorna a largura do contorno ao redor de um elemento |
| overflow | Define ou retorna o que fazer com o conteúdo que renderiza fora da caixa do elemento |
| overflowX | Especifica o que fazer com as bordas esquerda/direita do conteúdo, se estourar a área de conteúdo do elemento |
| overflowY | Especifica o que fazer com as bordas superior/inferior do conteúdo, se estourar a área de conteúdo do elemento |
| padding | Define ou retorna o preenchimento de um elemento (pode ter até quatro valores) |
| paddingBottom | Define ou retorna o preenchimento inferior de um elemento |
| paddingLeft | Define ou retorna o preenchimento esquerdo de um elemento |
| paddingRight | Define ou retorna o preenchimento correto de um elemento |
| paddingTop | Define ou retorna o preenchimento superior de um elemento |
| pageBreakAfter | Define ou retorna o comportamento de quebra de página após um elemento |
| pageBreakBefore | Define ou retorna o comportamento de quebra de página antes de um elemento |
| pageBreakInside | Define ou retorna o comportamento de quebra de página dentro de um elemento |
| perspective | Define ou retorna a perspectiva de como os elementos 3D são visualizados |
| perspectiveOrigin | Define ou retorna a posição inferior dos elementos 3D |
| position | Define ou retorna o tipo de método de posicionamento usado para um elemento (estático, relativo, absoluto ou fixo) |
| quotes | Define ou retorna o tipo de aspas para aspas incorporadas |
| resize | Define ou retorna se um elemento é ou não redimensionável pelo usuário |
| right | Define ou retorna a posição correta de um elemento posicionado |
| scrollBehavior | Especifica se deve animar suavemente a posição de rolagem, em vez de um salto direto, quando o usuário clica em um link dentro de uma caixa rolável. |
| tableLayout | Define ou retorna a maneira de dispor as células, linhas e colunas da tabela |
| tabSize | Define ou retorna o comprimento do caractere de tabulação |
| textAlign | Define ou retorna o alinhamento horizontal do texto |
| textAlignLast | Define ou retorna como a última linha de um bloco ou uma linha logo antes de uma quebra de linha forçada é alinhada quando text-align é "justificado" |
| textDecoration | Define ou retorna a decoração de um texto |
| textDecorationColor | Define ou retorna a cor da decoração do texto |
| textDecorationLine | Define ou retorna o tipo de linha em uma decoração de texto |
| textDecorationStyle | Define ou retorna o estilo da linha em uma decoração de texto |
| textIndent | Define ou retorna o recuo da primeira linha do texto |
| textJustify | Define ou retorna o método de justificação usado quando text-align é "justify" |
| textOverflow | Define ou retorna o que deve acontecer quando o texto transborda o elemento que o contém |
| textShadow | Define ou retorna o efeito de sombra de um texto |
| textTransform | Define ou retorna a capitalização de um texto |
| top | Define ou retorna a posição superior de um elemento posicionado |
| transform | Aplica uma transformação 2D ou 3D a um elemento |
| transformOrigin | Define ou retorna a posição dos elementos transformados |
| transformStyle | Define ou retorna como os elementos aninhados são renderizados no espaço 3D |
| transition | Uma propriedade abreviada para definir ou retornar as quatro propriedades de transição |
| transactionProperty | Define ou retorna a propriedade CSS para a qual o efeito de transição é |
| transiçãoDuration | Define ou retorna quantos segundos ou milissegundos um efeito de transição leva para ser concluído |
| transactionTimingFunction | Define ou retorna a curva de velocidade do efeito de transição |
| transiçãoDelay | Define ou retorna quando o efeito de transição começará |
| unicodeBidi | Define ou retorna se o texto deve ser substituído para suportar vários idiomas no mesmo documento |
| userSelect | Define ou retorna se o texto de um elemento pode ser selecionado ou não |
| verticalAlign | Define ou retorna o alinhamento vertical do conteúdo em um elemento |
| visibilidade | Define ou retorna se um elemento deve ser visível |
| whiteSpace | Define ou retorna como lidar com tabulações, quebras de linha e espaços em branco em um texto |
| width | Define ou retorna a largura de um elemento |
| wordBreak | Define ou retorna regras de quebra de linha para scripts não CJK |
| wordSpacing | Define ou retorna o espaçamento entre palavras em um texto |
| wordWrap | Permite que palavras longas e inquebráveis sejam quebradas e quebradas na próxima linha |
| widows | Define ou retorna o número mínimo de linhas para um elemento que deve estar visível no topo de uma página |
| zIndex | Define ou retorna a ordem da pilha de um elemento posicionado |